<template>
    <!-- 设备详情小卡片 -->
    <div :class="'device-card-wrap dialog-wrap ' +($Ctl.isCs(true)?'gradation-bg':'bg')">
        <div class="dialog-title">{{baseInfo.fcfName}}</div>
        <div class="device-location">{{(baseInfo.fbsName?(baseInfo.fbsName+'>'):'')+(baseInfo.location || '')}}</div>
        <div class="show-content" v-if="relateFc">
            <!-- Echarts + 文案 -->
            <template v-if="program==2">
                <div v-for="(item, index) in renderList" :key="index" class="program-wrap">
                    <!-- 文案 -->
                    <div class="info-content">
                        <p class="value-text" :class="mapFontClass(baseInfo.fireTType)">{{item.value}}<span class="units-text">（{{item.units}}）</span></p>
                        <p class="content-desc">{{mapStatus(baseInfo.fireTType)+'持续'+baseInfo.durationTimeStr}}</p>
                        <p v-if="baseInfo.hasAnalog == 2" class="status-desc" v-html="description"></p>
                    </div>
                    <!-- echart图表 -->
                    <div :id="item.domId" class="device-ehcarts-wrap"></div>
                </div>
                <div v-if="renderList.length == 0 && baseInfo.hasAnalog != 2" class="program-wrap">
                    <!-- 文案 -->
                    <div class="info-content">
                        <p class="value-text" :class="mapFontClass(baseInfo.fireTType)">{{baseInfo.statusAlias}}</p>
                        <p class="content-desc">{{mapStatus(baseInfo.fireTType)+'持续'+baseInfo.durationTimeStr}}</p>
                    </div>
                    <!-- 图 -->
                    <div class="device-img-wrap">
                        <img v-if="loaded&&imgSrc" class="device-img" :src="imgSrc">
                        <img v-if="loaded&&!imgSrc" class="device-img" :src="GLOBAL.defaultImg">
                    </div>
                </div>
            </template>
            <!-- Echarts + 列表 -->
            <template v-else-if="program==3">
                <div class="program-wrap">
                    <!-- 文案 -->
                    <div class="info-content residual-current">
                        <p class="current-result">剩余电流<span class="current-value">{{ renderList[0].value }}<span class="current-units">{{ renderList[0].units }}</span></span></p>
                        <div class="table-wrap">
                            <table width="290px" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>A相</th>
                                        <th>B相</th>
                                        <th>C相</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="(item, index) in renderList">
                                        <tr v-if="index != 0" :key="index">
                                            <td>{{ item.typeName }}</td>
                                            <td v-for="(obj, i) in item.tableList" :key="i">
                                                <div class="td-value">{{ obj.value + obj.units }}</div>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                        <p class="content-desc">{{baseInfo.remarks}}</p>
                    </div>
                    <!-- echart图表 -->
                    <div :id="renderList[0].domId" class="device-ehcarts-wrap residual-current-echarts"></div>
                </div>
            </template>
            <!-- 图+按钮 -->
            <template v-else-if="program==4">
                <div class="program-wrap VideoDevice">
                    <!-- 文案 -->
                    <div class="info-content">
                        <p class="value-text" :class="mapFontClass(baseInfo.fireTType)">{{baseInfo.statusAlias}}</p>
                        <p class="content-desc">{{baseInfo.remarks}}</p>
                    </div>
                    <!-- 图 -->
                    <div class="device-video-wrap">
                        <img v-if="loaded&&imgSrc" class="device-video-img" :src="imgSrc">
                        <img v-if="loaded&&!imgSrc" class="device-video-img" :src="GLOBAL.defaultImg">
                        <div class="video-btn" @click="openVideo()">查看监控</div>
                    </div>
                </div>
            </template>
            <!-- 图+文案 -->
            <template v-else>
                <div class="program-wrap">
                    <!-- 文案 -->
                    <div class="info-content">
                        <p class="value-text" :class="mapFontClass(baseInfo.fireTType)">{{baseInfo.statusAlias}}</p>
                        <p class="content-desc">{{baseInfo.remarks}}</p>
                    </div>
                    <!-- 图 -->
                    <div class="device-img-wrap">
                        <img v-if="loaded&&imgSrc" class="device-img" :src="imgSrc">
                        <img v-if="loaded&&!imgSrc" class="device-img" :src="GLOBAL.defaultImg">
                    </div>
                </div>
            </template>
            <div v-if="baseInfo.hasAnalog == 2 && (program == 2 && renderList.length == 0)" class="program-wrap">
                <!-- 文案 -->
                <div class="info-content">
                    <p class="value-text" :class="mapFontClass(baseInfo.fireTType)">{{baseInfo.statusAlias}}</p>
                    <p class="content-desc" v-html="description">{{baseInfo.remarks}}</p>
                </div>
                <!-- 图 -->
                <div class="device-img-wrap">
                    <img v-if="loaded&&imgSrc" class="device-img" :src="imgSrc">
                    <img v-if="loaded&&!imgSrc" class="device-img" :src="GLOBAL.defaultImg">
                </div>
            </div>
        </div>
        <!-- 无关联设备 -->
        <div class="show-content" v-else>
            <div class="program-wrap">
                <!-- 文案 -->
                <div class="info-content">
                    <p class="value-text color-3">无关联设备</p>
                </div>
                <!-- 图 -->
                <div class="device-img-wrap">
                    <img v-if="loaded&&baseInfo.statusPic" class="device-img" :src="baseInfo.statusPic">
                    <img v-if="loaded&&!baseInfo.statusPic" class="device-img" :src="GLOBAL.defaultImg">
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="card-bottom">
            <template v-if="baseInfo.fireTType == 0">
                <div class="device-state"></div>
            </template>
            <template v-else-if="baseInfo.handlerStatus == -1">
                <div class="device-state color-1">无人处理</div>
            </template>
            <template v-else-if="baseInfo.handlerStatus == 0 || baseInfo.handlerStatus == 2">
                <div class="device-state color-4">{{baseInfo.handlerAccountName}}正在处理</div>
            </template>
            <template v-else-if="baseInfo.handlerStatus == 1">
                <div class="device-state color-3">{{baseInfo.handlerAccountName}}已经处理</div>
            </template>
            <template v-else>
                <div class="device-state"></div>
            </template>
            <div class="features-list">
                <el-tooltip class="item" effect="dark" content="呼叫中心">
                    <div class="features-item iconfont icondapingtubiao_dianhua" @click="jumpCellCenter"><!--电话--></div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="查看视频">
                    <div class="features-item iconfont icondapingtubiao_shipin" v-if="baseInfo.videoList && baseInfo.videoList.length > 0" @click="openVideo"><!--视频--></div>
                </el-tooltip>
                <el-tooltip v-if="mapType==2" class="item" effect="dark" content="安全出口">
                    <div class="features-item iconfont iconanquanchukou safe-door" @click="lookforSafeDoor"></div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="查看周边">
                    <div v-show="mapLocation" class="features-item iconfont icondapingtubiao_chakanzhouwei" @click="lookSurroundDevices"><!--周边--></div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="导航">
                    <div class="features-item iconfont icondapingtubiao_daohang" @click="turnOnNavigation"><!--导航--></div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="详细信息">
                    <div class="features-item iconfont icondapingtubiao_xiangqing" v-if="relateFc" @click="jumpDeviceDetail"><!--信息--></div>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>
<script>
import { getMarkDetail } from '@/api/markInfo3d'
import echartsGl from 'echarts-gl'
let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/gauge");
require("echarts/lib/component/tooltip");
// let echartsGl = require("echarts-gl/src/echarts-gl");
// require("echarts-gl/src/chart/bar3D");
// require("echarts-gl/src/component/grid3D");

//组合式电气火灾探测器
var dataTypeIdArr = ["30", "31", "32", "33", "34", "35", "36", "37", "38"]
let fontClassMap = {
    '0': 'color-3',
    '10': 'color-1',
    '20': 'color-2',
    '30': 'color-5',
    '40': 'color-8',
}
export default {
    props: {
        parames: {
            default () {
                return {}
            }
        }
    },
    data() {
        return {
            loaded: false,
            relateFc:true,
            program: 1, // 1-图+文本  2-Echarts+文本  3-Echarts+列表  4-图+按钮
            imgSrc: '',
            description: '',
            fontClass: '',
            baseInfo: {}, // 设备信息
            mapLocation: '', // 设备位置信息
            orgMap2d: '',// 所属单位位置信息
            indoorMapId:'',//当前设备的地图id
            type: '', // 设备类别Id
            videoInfo: {},
            renderList: [], // 渲染的数据
            mapType: localStorage.getItem("ilinkBs_currentMapType")
        }
    },
    created() {
        this.$Ctl.loading(1, 10000)
        this.getInfo()
    },
    methods: {
        mapStatus(type) {
            let MAPLIST = {
                '0': '正常',
                '10': '报警',
                '20': '故障',
                '30': '屏蔽',
                '40': '联动',
            }
            return MAPLIST[type] || ''
        },
        mapFontClass(type) {
            return fontClassMap[type] || ''
        }, 
        // 获取设备详细信息
        getInfo() {
            let that = this
            // 常规
            // let res = {"status":200,"info":"操作成功","total":1,"data":{"detailLocation":"单位>一级建筑>二级建筑>三级建筑>具体位置","lastTime":"2019-05-30 19:43:07","statusPic":"/assets/assetsScenePic_1553240174235.jpg","icon":"","statusAlias":"火警","isVideoAnalysis":0,"fireSType":100,"fcfId":2158961,"facsCreateTime":"2019-05-30 19:43:07","isConcern":0,"hasAnalog":0,"fcfName":"1-01-004烟感","location":"202会议室","facsRecordTime":"2019-07-15 13:50:59","remarks":"报警持续一天","fireTType":10}}
            // 水箱
            // let res = {"status":200,"info":"操作成功","total":1,"data":{"detailLocation":"单位>一级建筑>二级建筑>三级建筑>具体位置","lastTime":"2019-05-29 11:09:16","statusPic":"/assets/assetsScenePic_1553239611114.jpg","analogList":[{"analogValue":2.40000,"analogUnits":"米","createTime":"2019-06-11 16:37:46","dataTypeName":"液位","dataTypeId":2,"fcFacilitiesId":2158951,"id":630020726},{"analogValue":3.59000,"analogUnits":"V","createTime":"2019-06-11 16:37:46","dataTypeName":"设备电压","dataTypeId":3,"fcFacilitiesId":2158951,"id":630020725}],"icon":"","statusAlias":"正常","isVideoAnalysis":0,"threshold":[{"upperThreshold":"4","dataTypeName":"设备电压","dataTypeId":"3","lowerThreshold":"3.2"},{"upperThreshold":"5","dataTypeName":"液位","dataTypeId":"2","lowerThreshold":"0.2"}],"fireSType":0,"fcfId":2158951,"facsCreateTime":"2019-05-29 11:09:16","isConcern":0,"hasAnalog":1,"fcfName":"tzds-A1-001号水位传感器","location":"楼顶水箱","facsRecordTime":"","remarks":"报警持续一天","fireTType":0}}    
            // 视频
            // let res = {"status":200,"info":"操作成功","total":1,"data":{"detailLocation":"单位>一级建筑>二级建筑>三级建筑>具体位置","lastTime":"2019-06-12 13:58:03","statusPic":"","icon":"","statusAlias":"有人值守","isVideoAnalysis":1,"fireSType":0,"fcfId":2158980,"facsCreateTime":"2019-06-12 13:58:03","isConcern":0,"videoList":[{"positionType":null,"shape":0,"latitude":"","channel":"1","isOnline":1,"type":4,"deviceId":"1000145$1$0$1","synchroThumbnail":null,"mapIcon":"","organizationId":146,"picUrl":"/dic/rdspFile_1555661359357.png","isCtrl":0,"isLianyunAccount":0,"isImportant":0,"bizId":"","name":"走道前端","menuId":null,"id":57352,"region":"","analysisStatus":0,"isEncrypt":0,"longitude":"","mapLocation":""}],"hasAnalog":0,"fcfName":"无人值守探测器","location":"消控室","facsRecordTime":"","videoAnalysisPic":"/dic/rdspFile_1555661359357.png","remarks":"报警持续一天","fireTType":0}}
            // 压力
            // let res = {"status":200,"info":"操作成功","total":1,"data":{"detailLocation":"单位>一级建筑>二级建筑>三级建筑>具体位置","lastTime":"2019-06-16 19:23:53","statusPic":"https://img.kdlayun.com/assets/assetsScenePic_1543200385335.png","analogList":[{"analogValue":0.47000,"analogUnits":"Mpa","createTime":"2019-06-21 16:37:14","dataTypeName":"压力","dataTypeId":1,"fcFacilitiesId":2158986,"id":89620975},{"analogValue":2.49000,"analogUnits":"V","createTime":"2019-06-21 16:37:14","dataTypeName":"设备电压","dataTypeId":3,"fcFacilitiesId":2158986,"id":89620976}],"icon":"","statusAlias":"故障","isVideoAnalysis":0,"threshold":[{"upperThreshold":"4","dataTypeName":"设备电压","dataTypeId":"3","lowerThreshold":"3.2"},{"upperThreshold":"3","dataTypeName":"压力","dataTypeId":"1","lowerThreshold":"0.15"}],"fireSType":220,"fcfId":2158986,"facsCreateTime":"2019-06-16 19:23:53","isConcern":0,"hasAnalog":1,"fcfName":"消火栓末端压力传感器","location":"楼顶消火栓箱内","facsRecordTime":"2019-06-20 19:33:49","remarks":"报警持续一天","fireTType":20}}
            // Nb温度
            // let res = {"status":200,"info":"操作成功","total":1,"data":{"detailLocation":"单位>一级建筑>二级建筑>三级建筑>具体位置","lastTime":"2019-07-18 09:21:20","statusPic":"https://img.kdlayun.com/assets/assetsScenePic_1543646733094.png","analogList":[{"analogValue":34.00000,"analogUnits":"℃","createTime":"2019-07-18 09:21:53","dataTypeName":"温度","dataTypeId":5,"fcFacilitiesId":2158948,"id":89690580},{"analogValue":3.52000,"analogUnits":"V","createTime":"2019-07-18 09:21:53","dataTypeName":"设备电压","dataTypeId":3,"fcFacilitiesId":2158948,"id":89690581}],"icon":"","statusAlias":"正常","isVideoAnalysis":0,"threshold":[{"upperThreshold":"65","dataTypeName":"温度","dataTypeId":"5","lowerThreshold":null}],"fireSType":0,"fcfId":2158948,"facsCreateTime":"2019-05-28 21:10:13","isConcern":0,"hasAnalog":2,"fcfName":"tzds-A3-1-001号温度传感器001","location":"东区配电房","facsRecordTime":"","remarks":"报警持续一天","fireTType":0}}
            // 四项剩余电流
            // let res = {"status":200,"info":"操作成功","total":1,"data":{"detailLocation":"单位>一级建筑>二级建筑>三级建筑>具体位置","lastTime":"2019-07-18 11:27:05","statusPic":"/assets/assetsScenePic_1553239965466.jpg","analogList":[{"analogValue":29.70000,"analogUnits":"℃","createTime":"2019-07-18 11:27:37","dataTypeName":"电气火灾A相温度","dataTypeId":36,"fcFacilitiesId":2159111,"id":89690835},{"analogValue":30.30000,"analogUnits":"℃","createTime":"2019-07-18 11:27:37","dataTypeName":"电气火灾B相温度","dataTypeId":37,"fcFacilitiesId":2159111,"id":89690836},{"analogValue":30.10000,"analogUnits":"℃","createTime":"2019-07-18 11:27:37","dataTypeName":"电气火灾C相温度","dataTypeId":38,"fcFacilitiesId":2159111,"id":89690837},{"analogValue":0.00000,"analogUnits":"mA","createTime":"2019-07-18 11:27:37","dataTypeName":"电气火灾剩余电流传感器","dataTypeId":39,"fcFacilitiesId":2159111,"id":89690834}],"icon":"","statusAlias":"正常","isVideoAnalysis":0,"threshold":[{"upperThreshold":"50","dataTypeName":"电气火灾A相温度","dataTypeId":"36","lowerThreshold":""},{"upperThreshold":"50","dataTypeName":"电气火灾B相温度","dataTypeId":"37","lowerThreshold":""},{"upperThreshold":"50","dataTypeName":"电气火灾C相温度","dataTypeId":"38","lowerThreshold":""},{"upperThreshold":"500","dataTypeName":"电气火灾剩余电流传感器","dataTypeId":"39","lowerThreshold":""}],"fireSType":0,"fcfId":2159111,"facsCreateTime":"2019-06-17 15:21:54","isConcern":0,"hasAnalog":1,"fcfName":"电器火灾监控装置","location":"门卫消控室配电箱内","facsRecordTime":"","remarks":"报警持续一天","fireTType":0}}

            getMarkDetail({
                id: that.parames.id,
                dType: that.$store.state.currentMapType == 4 ? 2 : that.mapType
            }).then(res => {
                if(res.status === 200) {
                    that.baseInfo = res.data.data
                    that.mapLocation = res.data.mapLocation
                    that.orgMap2d = res.data.orgMap2d
                    that.indoorMapId = res.data.indoorMapId
                    that.type = res.data.type
                    // 是否有关联设备
                    if(res.data.data && !$.isEmptyObject( res.data.data ) && res.data.data.fcfId) {
                        that.relateFc =true
                        that.mapContentType()
                    } else {
                        that.relateFc =false
                        that.$nextTick(() => {
                            that.$Ctl.loading(0)
                        })
                    }
                }
                that.$Ctl.loading(0)
                this.loaded=true
            }).catch(()=>{
                this.loaded=true
            })
        },
        // 映射对应的内容模板
        mapContentType() {
            let that = this
            let data = {
                realTimeStatus: that.baseInfo.fireTType
            }
            $.extend(data, that.baseInfo)
            that.imgSrc = data.statusPic
            // 取值范围：realTimeStatus(0, 10, 20, 30, 40)     hasAnalog(0, 1, 2)
            if(data.realTimeStatus == 20 || data.realTimeStatus == 30 || data.realTimeStatus == 40) {
                // 图+文本
                that.program = 1
                that.description = `<p>${data.fcfName}</p><p class="result ${fontClassMap[data.realTimeStatus]}">${data.statusAlias}</p>`
            } else {
                if(data.hasAnalog == 1 || data.hasAnalog == 2) {
                    let newArr = []
                    let hasThreeItems_tempData = false // 标记是否添加过三项-温度数据
                    let tempDataIndex = 0
                    let hasThreeItems_voltageData = false // 标记是否添加过三项-电压数据
                    let voltageDataIndex = 0
                    let hasThreeItems_currentData = false // 标记是否添加过三项-电流数据
                    let currentDataIndex = 0
                    that.program = 2
                    for(let i=0, len=data.analogList.length; i < len; i++) {
                        let color = "#77be07";
                        let min = 0;
                        let max = 2.5;
                        let splitNumber = 5;
                        let obj = data.analogList[i]
                        let newObj = {
                            domId: 'echartsWrap_' + data.id + '_' + obj.dataTypeId,
                            dataTypeId: obj.dataTypeId,
                            dataTypeName: obj.dataTypeName,
                            fcfName: data.fcfName,
                            colorClass: fontClassMap[data.fireTType], // 字体颜色Class
                            units: obj.analogUnits || '', // 计量单位
                            text: obj.dataTypeName, // 描述文案
                            value: obj.analogValue || '' // 值
                        }
                        // Echarts图表
                        // 如果存在阈值设置
                        if(data.threshold && data.threshold.length > 0) {
                            for(let j=0, num=data.threshold.length; j < num; j++) {
                                if(data.threshold[j].dataTypeId == obj.dataTypeId && data.threshold[j].dataTypeId != 3) {
                                    min = data.threshold[j].lowerThreshold || 0
                                    max = data.threshold[j].upperThreshold || 2.5
                                }
                            }
                        }
                        switch(obj.dataTypeId) {
                            case 1:
                            case 40:
                                // 压力/浓度
                                newArr.push(newObj)
                                // 水压的码表量程一般为0-2.5
                                min = 0
                                max = 2.5
                                // 渲染压力码表
                                this.$nextTick(() => {
                                    that.drawClockChart(newObj.domId, obj.dataTypeId, newObj.value, newObj.units, min, max, splitNumber)
                                })
                                break
                            case 2: 
                                let currentAnalogValue = newObj.value
                                newArr.push(newObj)
                                // 渲染立方体
                                this.$nextTick(() => {
                                    that.drawWaterChart(newObj.domId, (max-currentAnalogValue), currentAnalogValue)
                                })
                                break
                            case 3: 
                                // 设备电压不展示
                                break
                            case 5: 
                                // 温度
                                newArr.push(newObj)
                                this.$nextTick(() => {
                                    that.drawTempClockChart(newObj.domId, obj.dataTypeId, newObj.value, newObj.units, max)
                                })
                                break
                            case 6: 
                                // 湿度
                                newArr.push(newObj)
                                splitNumber = 10
                                max = max < 100 ? 100 : max
                                this.$nextTick(() => {
                                    that.drawClockChart(newObj.domId, obj.dataTypeId, newObj.value, newObj.units, min, max, splitNumber)
                                })
                                break
                            case 7: 
                            case 8:
                            case 9:
                                // 电压
                                newArr.push(newObj)
                                max = 450
                                splitNumber = 3
                                that.drawHalfClockChart(newObj.domId, obj.dataTypeId, newObj.value, newObj.units, max, splitNumber)
                                break
                            case 10: 
                            case 11:
                            case 12:
                                // 电压
                                newArr.push(newObj)
                                max = 100;
                                splitNumber = 5;
                                that.drawHalfClockChart(newObj.domId, obj.dataTypeId, newObj.value, newObj.units, max, splitNumber)
                                break
                            case 30:
                            case 31:
                            case 32:
                                that.program = 3
                                if(hasThreeItems_voltageData) { // 已经添加过
                                    newArr[voltageDataIndex].tableList.push(newObj)
                                } else { // 未添加过
                                    hasThreeItems_voltageData = true
                                    voltageDataIndex = newArr.length
                                    newArr.push({
                                        typeName: '电压',
                                        tableList: [newObj]
                                    })
                                }
                                break
                            case 33:
                            case 34:
                            case 35:
                                that.program = 3

                                if(hasThreeItems_currentData) { // 已经添加过
                                    newArr[currentDataIndex].tableList.push(newObj)
                                } else { // 未添加过
                                    hasThreeItems_currentData = true
                                    currentDataIndex = newArr.length
                                    newArr.push({
                                        typeName: '电流',
                                        tableList: [newObj]
                                    })
                                }
                                break
                            case 36:
                            case 37:
                            case 38:
                                // 三项电流/电压/温度-表格
                                that.program = 3
                                
                                if(hasThreeItems_tempData) { // 已经添加过
                                    newArr[tempDataIndex].tableList.push(newObj)
                                } else { // 未添加过
                                    hasThreeItems_tempData = true
                                    tempDataIndex = newArr.length
                                    newArr.push({
                                        typeName: '温度',
                                        tableList: [newObj]
                                    })
                                }
                                break
                            case 39: 
                                // 三项电流/电压
                                that.program = 3
                                // 电气火灾剩余电流传感器的放在第一个
                                newArr.unshift(newObj)
                                tempDataIndex += 1
                                voltageDataIndex += 1
                                currentDataIndex += 1
                                this.$nextTick(() => {
                                    that.drawHalfClockChart(newObj.domId, obj.dataTypeId, newObj.value, newObj.units, 1000, 5);
                                })
                                break
                            default:
                                newArr.push(newObj)
                                return false;
                        }
                    }
                    that.renderList = newArr
                    if(data.hasAnalog == 2) {
                        that.description = `<p class="result ${fontClassMap[data.realTimeStatus]}">差温${data.statusAlias}</p>`
                    }
                } else {
                    if(data.isVideoAnalysis == 1) {
                        // 视频：图+按钮
                        that.program = 4
                        that.imgSrc = data.videoAnalysisPic
                        that.videoInfo = data
                    } else {
                        // 图+文本
                        that.program = 1
                        that.description = `<p>${data.fcfName}</p><p class="result ${fontClassMap[data.realTimeStatus]}">${data.statusAlias}</p>`
                    }
                }
            }
            that.$Ctl.loading(0)
        },
        // 码表-压力-湿度-浓度
        drawClockChart(
            domId,
            dataTypeId,
            currentAnalogValue,
            currentAnalogUnits,
            min,
            max,
            splitNumber
        ) {
            var self = this;
            var _score = currentAnalogValue;
            if(!document.getElementById(domId)) return
            var myChart_safetyIndex = Echarts.init(
                document.getElementById(domId)
            );

            let color_bg = "#999";
            let color_green = "rgba(71,207,173,1)";
            let color_red = "#fe6668";
            let colorArr = [];
            if (self.baseInfo.fireTType != 10) {
                //被包含
                colorArr.push([Math.abs(currentAnalogValue / max), color_green]);
                colorArr.push([1, color_bg]);
            } else {
                colorArr.push([0, color_bg]);
                colorArr.push([Math.abs(currentAnalogValue / max), color_red]);
                colorArr.push([1, color_bg]);
            }
            colorArr.push([1, color_bg]);

            var option_safetyIndex = {
                tooltip: null,
                series: [{
                    type: "gauge",
                    min: 0,
                    max: max,
                    radius: "70%",
                    center: ["50%", "52%"],
                    splitNumber: splitNumber,
                    //仪表盘标题。
                    title: {
                        show: true,
                        textStyle: {
                            fontSize: 15
                        }
                    },
                    axisLine: {
                        // 坐标轴线
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: colorArr,
                            shadowBlur: 2,
                            width: 8,
                            shadowColor: "#999" //默认透明
                        }
                    },
                    axisTick: {
                        // 坐标轴小标记
                        splitNumber: 5,
                        length: 14, // 属性length控制线长
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: "#999"
                        }
                    },
                    splitLine: {
                        //分割线样式（及10、20等长线样式）
                        length: 18,
                        lineStyle: {
                            // 属性lineStyle控制线条样式
                            color: "#999"
                        }
                    },
                    pointer: {
                        length: "60%",
                        width: "3"
                    },
                    detail: {
                        formatter: currentAnalogUnits,
                        textStyle: {
                            fontSize: 12
                        },
                        offsetCenter: [0, "65%"]
                        },
                        data: [
                            {
                                value: _score,
                                name: ""
                            }
                        ]
                    }
                ]
            }
            if (option_safetyIndex && typeof option_safetyIndex === "object") {
                myChart_safetyIndex.setOption(option_safetyIndex, true);
            }
        },
        // echart画水箱
        drawWaterChart(domId, top, bottom) {
            var self = this;
            var waterChart = Echarts.init(document.getElementById(domId));
            let option = {
                title: null,
                tooltip: {
                    show: false
                },
                xAxis3D: {
                    type: "category",
                    data: [""]
                },
                yAxis3D: {
                    type: "category",
                    data: [""]
                },
                zAxis3D: {
                    type: "value"
                },
                grid3D: {
                    show: false, //是否显示三维迪卡尔坐标
                    boxWidth: 80,
                    boxDepth: 20,
                    axisPointer: {
                        show: false
                    },
                    viewControl: {
                        alpha: 15, //视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                        beta: 60 //视角绕 y 轴，即左右旋转的角度
                    },
                    top: "-5%", //组件的视图离容器上侧的距离
                    left: "-10%",
                    bottom: "-10%"
                },
                series: [
                    {
                        type: "bar3D",
                        barSize: 75,
                        data: [[0, 0, bottom]],
                        stack: "stack",
                        shading: "lambert",
                        itemStyle: {
                            //柱条样式
                            color: "#428ceb",
                            opacity: 0.9
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    },
                    {
                        type: "bar3D",
                        barSize: 75,
                        data: [[0, 0, top]],
                        stack: "stack",
                        shading: "lambert",
                        itemStyle: {
                            //柱条样式
                            color: "#428ceb",
                            opacity: 0.5
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        }
                    }
                ]
            }
            waterChart.setOption(option);
        },
        // 码表-ABC相-电气火灾剩余电流传感器
        drawHalfClockChart(
            domId,
            dataTypeId,
            currentAnalogValue,
            currentAnalogUnits,
            max,
            splitNumber
        ) {
            var self = this;
            if(!document.getElementById(domId)) return
            var myChart_safetyIndex = Echarts.init(
                document.getElementById(domId)
            )
            // 设置颜色变化
            let color_bg = "#999";
            let color_green = "rgba(71,207,173,1)";
            let color_red = "#fe6668";
            let colorArr = [];
            if (self.baseInfo.fireTType != 10) {
                //被包含
                colorArr.push([Math.abs(currentAnalogValue / max), color_green]);
                colorArr.push([1, color_bg]);
            } else {
                colorArr.push([0, color_bg]);
                colorArr.push([Math.abs(currentAnalogValue / max), color_red]);
                colorArr.push([1, color_bg]);
            }
            var option_safetyIndex = {
                series: [
                    {
                        type: "gauge",
                        min: 0,
                        max: max,
                        radius: "150%",
                        center: ["82%", "86%"],
                        startAngle: 180,
                        endAngle: 90,
                        splitNumber: splitNumber, //5等分
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: {
                            //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12
                        },
                        axisLine: {
                            // 坐标轴线
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: colorArr,
                                shadowBlur: 2,
                                width: 8,
                                shadowColor: "#999" //默认透明
                            }
                        },
                        axisTick: {
                            // 坐标轴小标记
                            splitNumber: 5,
                            length: 14, // 属性length控制线长
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: "#999"
                            }
                        },
                        splitLine: {
                            //分割线样式（及10、20等长线样式）
                            length: 18,
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: "#999"
                            }
                        },
                        pointer: {
                            length: "60%",
                            width: "3"
                        },
                        detail: null,
                        data: [
                            {
                                value: currentAnalogValue,
                                name: ""
                            }
                        ]
                    }
                ]
            };
            if (option_safetyIndex && typeof option_safetyIndex === "object") {
                myChart_safetyIndex.setOption(option_safetyIndex, true);
            }
        },
        //码表-温度
        drawTempClockChart(
            domId,
            dataTypeId,
            currentAnalogValue,
            currentAnalogUnits,
            thresholdMax
        ) {
            var self = this;
            var realNum = -25 - currentAnalogValue;
            if (realNum <= 0) {
                realNum = Math.abs(realNum);
            }
            let color_bg = "#999";
            let color_green = "rgba(71,207,173,1)";
            let color_red = "#fe6668";
            let colorArr = [];
            if (currentAnalogValue <= thresholdMax) {
                //被包含
                colorArr.push([Math.abs(realNum / 125), color_green]);
                colorArr.push([1, color_bg]);
            } else {
                colorArr.push([0, color_bg]);
                colorArr.push([Math.abs(realNum / 125), color_red]);
                colorArr.push([1, color_bg]);
            }
            colorArr.push([1, color_bg]);
            if(!document.getElementById(domId)) return
            var myChart_safetyIndex = Echarts.init(
                document.getElementById(domId)
            );
            var option_safetyIndex = {
                series: [
                    {
                        type: "gauge",
                        min: -25,
                        max: 100,
                        radius: "70%",
                        center: ["50%", "52%"],
                        splitNumber: 5,
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: {
                            //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12
                        },
                        axisLine: {
                            // 坐标轴线
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: colorArr,
                                width: 8
                                // shadowBlur: 2,
                                // shadowColor: '#999', //默认透明
                            }
                        },
                        axisTick: {
                            // 坐标轴小标记
                            splitNumber: 5,
                            length: 3, // 属性length控制线长
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: "#fff"
                            }
                        },
                        splitLine: {
                            //分割线样式（及10、20等长线样式）
                            length: 6,
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: "#fff"
                            }
                        },
                        pointer: {
                            length: "60%",
                            width: "3"
                        },
                        detail: {
                            formatter: currentAnalogUnits,
                            textStyle: {
                                fontSize: 12
                            },
                            offsetCenter: [0, "65%"]
                        },
                        data: [
                            {
                                value: currentAnalogValue,
                                name: ""
                            }
                        ]
                    }
                ]
            }
            if (option_safetyIndex && typeof option_safetyIndex === "object") {
                myChart_safetyIndex.setOption(option_safetyIndex, true)
            }
        },
        // 查看监控/周边视频
        openVideo() {
            if(!this.$Ctl.getClickEnabel(1)) return
            this.$Ctl.showVideoClient(null,this.baseInfo.videoList,this.parames.id)
        },
        // 跳转呼叫中心
        jumpCellCenter() {
            this.$Ctl.enterChild('CellCenter', {'orgId': this.baseInfo.orgId, 'userId': this.baseInfo.handlerAccount, 'userName': this.baseInfo.handlerAccountName})
        },
        // 周边设备
        lookSurroundDevices() {
            let fMapid = localStorage.getItem('ilinkBs_fIndoorMapId')
            let _parames = {
                location: this.mapLocation, // 位置坐标
                orgId: this.baseInfo.orgId, // 联网单位Id
                id:this.parames.id
            }
            if (fMapid == this.indoorMapId || JSON.parse(this.mapLocation).lon) {
                this.$Ctl.openPopup('Peripherals', '', _parames)
            }else{
                this.$Ctl.message('<span class="message-title">该设备不在当前地图，请先定位当前设备地图</span>',3);
            }
        },
        // 安全出口(目前只开放蜂鸟地图)
        lookforSafeDoor(){
            let fMapid = localStorage.getItem('ilinkBs_fIndoorMapId')
            if (fMapid == this.indoorMapId || JSON.parse(this.mapLocation).lon) {
                window.FunList.drawLineToOut_FMap && window.FunList.drawLineToOut_FMap(this.mapLocation)
            }else{
                this.$Ctl.message('<span class="message-title">该设备不在当前地图，请先定位当前设备地图</span>',3);
            }
        },
        // 导航
        turnOnNavigation() {
            let that = this
            that.$Ctl.openPopup('Navigation', '', {
                location: that.mapLocation, // 位置坐标
                orgMap2d: that.orgMap2d, // 单位位置信息
                id: that.parames.id, // 标注id，给三维打开导航使用
                name: that.baseInfo?(that.baseInfo.fcfName|| that.baseInfo.location):''
            })
        },
        // 设备详情
        jumpDeviceDetail() {
            let _parames = {
                orgId: this.baseInfo.orgId, // 联网单位Id
                name: this.baseInfo.fcfName,
                systemId: this.baseInfo.systemId || '',
                fbsId: this.baseInfo.fbsId || '',
                fcfId: this.baseInfo.fcfId || '',
            }
            this.$Ctl.enterDetail( 'EquipmentList', _parames)
        }
    }
}
</script>
<style lang="scss">
.device-card-wrap {
    .device-location {
        margin-top: 20px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #A3BEDD;
        font-size: 20px;
    }
    .show-content {
        margin: 35px auto;
        width: 520px;
        height: 180px;
        background: url(../../../assets/images/dialogCards/content-bg.png) center center no-repeat;
        background-size: cover;
        .program-wrap {
            display: flex;
            height: 100%;
            align-items: center;
            .info-content {
                padding-top: 37px;
                width: 278px;
                height: 100%;
                text-align: center;
                .value-text {
                    height: 66px;
                    line-height: 66px;
                    // color: #CE334F;
                    font-size: 46px;
                    .units-text {
                        font-size: 20px;
                    }
                }
                .content-desc {
                    height: 40px;
                    line-height: 40px;
                    color: #FFF;
                    font-size: 18px;
                }
                .status-desc {
                    font-size: 18px;
                }
            }
            .device-img-wrap {
                width: 242px;
                .device-img {
                    margin: 0 auto;
                    display: block;
                    width: 150px;
                    height: 125px;
                    object-fit: contain;
                }
            }
            .device-ehcarts-wrap {
                width: 242px;
                height: 100%;
            }
            .VideoDevice {
                .info-content {
                    width: 40%;
                }
            }
            .device-video-wrap {
                position: relative;
                width: 60%;
                height: 100%;
                text-align: center;
                .device-video-img {
                    object-fit: cover;
                    max-width: 100%;
                    max-height: 100%;
                    padding: 1px;
                }
                .video-btn {
                    position: absolute;
                    top: 145px;
                    right: 6px;
                    display: block;
                    padding: 3px 12px;
                    color: #FFF;
                    background:rgba(94,94,94,1);
                    border:1px solid rgba(255,255,255,1);
                    opacity:0.5;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
            // 剩余电流
            .residual-current {
                padding: 10px 20px;
                width: 310px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .current-result {
                    color: #A3BEDD;
                    font-size: 18px;
                    height: 30px;
                    line-height: 30px;
                    text-align: left;
                    .current-value {
                        height: 30px;
                        padding-left: 18px;
                        color: #CE334F;
                        font-size: 28px;
                        .current-units {
                            font-size: 20px;
                        }
                    }
                }
                .table-wrap {
                    color: #A3BEDD;
                    table {
                        border-bottom: 1px solid #24455c;
                        border-right: 1px solid #24455c;
                        th,
                        td {
                            padding: 1px 5px;
                            height: 20px;
                            border-top: 1px solid #24455c;
                            border-left: 1px solid #24455c;
                            .td-value {
                                color: #ce334f;
                            }
                        }
                    }
                }
            }
            .residual-current-echarts {
                margin-left: 20px;
                width: 180px;
                height: 160px;
            }
        }
    }
    .card-bottom {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .device-state {
            font-size: 20px;
        }
        .features-list {
            display: flex;
            .features-item {
                margin-left: 10px;
                width: 38px;
                height: 38px;
                line-height: 38px;
                color: #4699FF;
                text-align: center;
                font-size: 34px;
                cursor: pointer;
            }
            .safe-door{
                border: 1px solid #4699FF;
                border-radius: 8px;
                width: 34px;
                height: 34px;
                line-height: 34px;
                margin-top: 3px;
            }
        }
    }
}
                
</style>

